import React, { Component } from "react";
import { Form, Input } from "antd";
import { emailOrPhone } from "@/utils/regexp";
const FormItem = Form.Item;

export default class LoginWithMsgFormItem extends Component {
  static defaultProps = {
    id: "account",
    disabled: false,
    initialValue: undefined,
    focus: false,
    rules: [
      {
        required: true,
        message: "请输入手机号或邮箱"
      },
      {
        message: "请输入正确的手机号或邮箱",
        pattern: emailOrPhone
      }
    ],
    placeholder: "请输入手机号或邮箱"
  };
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }
  componentDidMount() {
    if (this.props.focus) this.inputRef.focus();
  }
  render() {
    const {
      form: { getFieldDecorator },
      id,
      disabled,
      initialValue,
      placeholder,
      rules
    } = this.props;
    return (
      <FormItem>
        {getFieldDecorator(id, {
          initialValue: initialValue,
          rules
        })(
          <Input
            disabled={disabled}
            className="login-input"
            ref={inputRef => (this.inputRef = inputRef)}
            placeholder={placeholder}
          />
        )}
      </FormItem>
    );
  }
}
